<template>
    <div>
         <!-- 生产工单选择对话框 -->
         <el-dialog v-model="props.findWorkorderDialog" title="生产工单选择" @close="closeDialog" width="1200px">
            <div>
                <!-- 生产工单界面 -->
                <el-card style="margin-bottom:20px;">
                    <el-form :inline="true" :model="workOrderForm">
                        <el-form-item label="工单编码" :class="{ 'bold-label': true }">
                            <el-input v-model="workOrderForm.workorderCode" placeholder="请输入工单编码" clearable />
                        </el-form-item>
                        <el-form-item label="工单名称" :class="{ 'bold-label': true }">
                            <el-input v-model="workOrderForm.workorderName" placeholder="请输入工单名称" clearable />
                        </el-form-item>
                        <el-form-item label="来源单据" :class="{ 'bold-label': true }">
                            <el-input v-model="workOrderForm.sourceCode" placeholder="请输入来源单据" clearable />
                        </el-form-item>
                        <el-form-item label="产品编码" :class="{ 'bold-label': true }">
                            <el-input v-model="workOrderForm.productCode" placeholder="请输入产品编码" clearable />
                        </el-form-item>
                        <el-form-item label="产品名称" :class="{ 'bold-label': true }">
                            <el-input v-model="workOrderForm.productName" placeholder="请输入产品名称" clearable />
                        </el-form-item>
                        <el-form-item label="客户编码" :class="{ 'bold-label': true }">
                            <el-input v-model="workOrderForm.clientCode" placeholder="请输入客户编码" clearable />
                        </el-form-item>
                        <el-form-item label="客户名称" :class="{ 'bold-label': true }">
                            <el-input v-model="workOrderForm.clientName" placeholder="请输入客户名称" clearable />
                        </el-form-item>
                        <el-form-item label="工单类型" :class="{ 'bold-label': true }">
                            <el-select v-model="workOrderForm.workorderType" placeholder="请选择工单类型" clearable
                                @change="handleStatusChange" style="width:195px">
                                <el-option label="自产" value="SELF" />
                                <el-option label="外协" value="OUTSOURCING" />
                                <el-option label="外购" value="OUTSOURCE" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button :icon="Search" type="primary" @click="onSearch">搜索</el-button>
                            <el-button :icon="Refresh" plain @click="onReset">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>

                <el-card>

                    <el-table :data="tableData" style="width: 100%">
                        <el-table-column label="工单编码" width="200px" show-overflow-tooltip >
                            <template #default="scope">
                                <el-radio v-model="selectedRowId" :label="scope.row.workorderId"
                                    @change="selectRow(scope.row)">
                                    <span>{{ scope.row.workorderCode }}</span>
                                </el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column label="工单名称" prop="workorderName" width="100px" align="center" show-overflow-tooltip/>
                        <el-table-column label="工单类型" width="100px" align="center">
                            <template #default="{ row }">
                                <span v-if="row.workorderType == 'SELF'">自产</span>
                                <span v-else-if="row.workorderType == 'OUTSOURCING'">外协</span>
                                <span v-else>外购</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="工单来源" width="100px" align="center">
                            <template #default="{ row }">
                                <span v-if="row.orderSource == 'ORDER'">客户订单</span>
                                <span v-else>库存备货</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订单编号" prop="clientOrderCode" width="100px" align="center"
                            show-overflow-tooltip />
                        <el-table-column label="产品编码" prop="productCode" width="100px" align="center" show-overflow-tooltip/>
                        <el-table-column label="产品名称" prop="productName" width="100px" align="center" show-overflow-tooltip/>
                        <el-table-column label="规格型号" prop="productSpc" show-overflow-tooltip align="center" />
                        <el-table-column label="单位" prop="unitOfMeasure" width="100px" align="center" />
                        <el-table-column label="工单数量" prop="quantity" width="100px" align="center" show-overflow-tooltip/>
                        <el-table-column label="调整数量" prop="quantityChanged" width="100px" align="center" show-overflow-tooltip/>
                        <el-table-column label="已生产数量" prop="quantityProduced" width="100px" align="center" show-overflow-tooltip/>
                        <el-table-column label="批次号" prop="batchCode" align="center" width="100px" show-overflow-tooltip/>
                        <el-table-column label="客户编码" prop="clientCode" width="100px" align="center" show-overflow-tooltip/>
                        <el-table-column label="客户名称" prop="clientName" show-overflow-tooltip align="center" />
                        <el-table-column label="需求日期" prop="requestDate" width="140px" align="center" />
                        <el-table-column label="单据状态" width="100px" align="center">
                            <template #default="{ row }">
                                <span v-if="row.status == 'PREPARE'">草稿</span>
                                <span v-else-if="row.status == 'CONFIRMED'">已确认</span>
                                <span v-else-if="row.status == 'APPROVING'">审批中</span>
                                <span v-else-if="row.status == 'APPROVED'">已审批</span>
                                <span v-else>已完成</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-card>
            </div>
            <template #footer>
                <div class="dialog-footer">
                <el-button type="primary" @click="confirmWorkOrder">确认</el-button>
                <el-button @click="NotConfirmWorkOrder">取消</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>


<script setup>
import { ref,reactive } from 'vue';
import { findWorkOrder} from '@/apis/xms/index';
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import { Search, Refresh } from '@element-plus/icons-vue';

const props = defineProps(['findWorkorderDialog']);
const emit = defineEmits(['close-dialog']);

const rowDataP = ref({});//表格选中行（用于存储选中的行数据）
// 用于跟踪当前选中的行ID
const selectedRowId = ref(null);
const workOrderForm = reactive({
    workorderCode: '',
    workorderName: '',
    sourceCode: '',
    productCode: '',
    productName: '',
    clientCode: '',
    clientName: '',
    workorderType: '',
});
const tableData = ref([]);// 用于存储表格数据
const loadList = async () => { // 查询工单总数据
        await findWorkOrder(workOrderForm).then(res=>{
            tableData.value = res;
        console.log("Loaded tableData:", tableData.value);
        });
};
//工单类型
const handleStatusChange = (value) => {
    workOrderForm.workorderType = value
}
//搜索功能
const onSearch = async () => {
    loadList();// 加载表格数据
}
//搜索条件重置
const onReset = async () => {
    Object.keys(workOrderForm).forEach(key => {//清空搜索条件
        workOrderForm[key] = null
    })
}

//点击圆形按钮选中莫一行触发
const selectRow = (row) => {   console.log('选中的行数据：', row);
    selectedRowId.value = row.workorderId,
    rowDataP.value = row;
}

const confirmWorkOrder = () => {// 确认工单
    if (selectedRowId.value) {
        emit('rowDataP', rowDataP.value);// 向父组件传递选中的行数据
        closeDialog(); // 关闭对话框
    } else {
        ElNotification.warning({
            title: '提示',
            message: '请至少选择一条数据！',
            type: 'warning',
        })
    }
};

const NotConfirmWorkOrder = () => {// 取消工单
    closeDialog();// 关闭对话框
};

const closeDialog = () => {// 关闭对话框
    emit('close-dialog');
};
loadList();
</script>

<style  scoped>

</style>
